<!--
 * @Author: your name
 * @Date: 2020-12-31 14:20:29
 * @LastEditTime: 2021-01-04 13:56:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_demo\src\components\steps.vue
-->
<template>
  <div class="steps">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "steps",
  props: {
    // 设置当前激活步骤
    active: {
      type: Number,
      default: 0,
    }
  },
  data(){
      return {
          steps:[],
          widthList: [],
          iconWidthList: []
      }
  },
  computed:{
    domWidth(){
      return Math.max(...this.widthList)
    },
    iconWidth(){
      return Math.max(...this.iconWidthList)
    }
  },
  watch: {
    active(newVal, oldVal) {
      this.$emit("change", newVal, oldVal);
    },

    steps(steps){
        steps.forEach((child,idx) =>{
            child.index = idx;
        })
    }
  },
};
</script>
<style lang="scss" scoped>
.steps{
    display: flex;
    flex-direction: column;
}
</style>